<template>
  <div class="exam-detail-container scroll" id="exam">

    <!--    试卷的头部-->
    <div class="exam-header">
      <el-page-header :title="user.role=='0'?'返回':'保存并返回'" @back="goBack" :content="examName"></el-page-header>
      <el-button icon="el-icon-circle-plus" @click="handleAdd"
                 type="warning" v-if="user.role=='1'" style="margin-right: 30px;">添加题目
      </el-button>
    </div>

    <el-empty v-if="judge.length<=0&&completion.length<=0&&single.length<=0" description="没有任何题目"></el-empty>

    <!--    判断题-->
    <el-card v-if="judge.length>0" class="box-card">
      <div slot="header" class="clearfix">
        <h4>{{ `一、判断(共${judgeScore}分，共${judge.length}题)` }}</h4>
      </div>
      <div class="qus-item" v-for="(j,index) in judge" :key="j.id">
        <div class="question-title"><span>{{ `${index + 1}.${j.title}(${j.score}分)` }}</span></div>
        <div class="question-content">
          <el-radio :disabled="true" v-model="j.answer" label="A">{{ j.a }}</el-radio>
          <el-radio :disabled="true" v-model="j.answer" label="B">{{ j.b }}</el-radio>
        </div>
        <el-button icon="el-icon-edit" v-if="user.role=='1'&&(!isReadExam)" size="small" type="primary"
                   @click="handleEdit(j)">编辑
        </el-button>
        <el-button icon="el-icon-delete-solid" v-if="user.role=='1'&&(!isReadExam)" size="small" type="danger"
                   @click="handleDel(j.id)">删除
        </el-button>
        <el-divider></el-divider>
      </div>

    </el-card>

    <!--    填空题-->
    <el-card v-if="completion.length>0" class="box-card">
      <div slot="header" class="clearfix">
        <h4>{{
            `${judge.length > 0 ? '二' : '一'}、填空题(共${completionScore}分，共${completion.length}题)`
          }}</h4>
      </div>
      <div class="qus-item" v-for="(c,index) in completion" :key="c.id">
        <div class="question-title"><span>{{ `${index + 1}.${c.title}(${c.score}分)` }}</span></div>
        <el-form ref="form" label-width="80px">
          <el-form-item label="第一空" v-if="c.a">
            <el-input :disabled="true" v-model="c.a" placeholder="第一空"></el-input>
          </el-form-item>
          <el-form-item label="第二空" v-if="c.b">
            <el-input :disabled="true" v-model="c.b" placeholder="第二空"></el-input>
          </el-form-item>
          <el-form-item label="第三空" v-if="c.c">
            <el-input :disabled="true" v-model="c.c" placeholder="第三空"></el-input>
          </el-form-item>
          <el-form-item label="第四空" v-if="c.d">
            <el-input :disabled="true" v-model="c.d" placeholder="第四空"></el-input>
          </el-form-item>
        </el-form>
        <el-button icon="el-icon-edit" v-if="user.role=='1'&&(!isReadExam)" size="small" type="primary"
                   @click="handleEdit(c)">编辑
        </el-button>
        <el-button icon="el-icon-delete-solid" v-if="user.role=='1'&&(!isReadExam)" size="small" type="danger"
                   @click="handleDel(c.id)">删除
        </el-button>
        <el-divider></el-divider>
      </div>

    </el-card>

    <!--    单选题-->
    <el-card v-if="single.length>0" class="box-card">
      <div slot="header" class="clearfix">
        <h4>{{ `${getSingleTitleOrder()}、单选题(共${singleScore}分，共${single.length}题)` }}</h4>
      </div>
      <div class="qus-item" v-for="(s,index) in single">
        <div class="question-title"><span>{{ `${index + 1}.${s.title}(${s.score}分)` }}</span></div>
        <div class="question-content">
          <el-radio :disabled="true" v-model="s.answer" label="A">A.{{ s.a }}</el-radio>
          <el-radio :disabled="true" v-model="s.answer" label="B">B.{{ s.b }}</el-radio>
          <el-radio :disabled="true" v-model="s.answer" label="C">C.{{ s.c }}</el-radio>
          <el-radio :disabled="true" v-model="s.answer" label="D">D.{{ s.d }}</el-radio>
        </div>
        <el-button icon="el-icon-edit" v-if="user.role=='1'&&(!isReadExam)" size="small" type="primary"
                   @click="handleEdit(s)">编辑
        </el-button>
        <el-button icon="el-icon-delete-solid" v-if="user.role=='1'&&(!isReadExam)" size="small" type="danger"
                   @click="handleDel(s.id)">删除
        </el-button>
        <el-divider></el-divider>
      </div>

    </el-card>

    <!--    添加题目修改题目的对话框-->
    <el-dialog :title="isAdd?'添加题目':'修改题目'" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :rules="rules" ref="qusForm" :model="question" label-width="80px">
        <el-form-item prop="title" label="题目">
          <el-input v-model="question.title"></el-input>
        </el-form-item>

        <el-form-item label="题目类型">
          <el-col :span="6">
            <el-form-item>
              <el-select v-model="question.type" placeholder="选择题目类型" @change="handleTypeChange">
                <el-option label="单选题" value="0"></el-option>
                <el-option label="判断题" value="1"></el-option>
                <el-option label="填空题" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分值" prop="score">
              <el-select v-model="question.score" placeholder="选择题目占分">
                <el-option label="1分" value="1"></el-option>
                <el-option label="2分" value="2"></el-option>
                <el-option label="3分" value="3"></el-option>
                <el-option label="4分" value="4"></el-option>
                <el-option label="5分" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!--            填空题答案的个数-->
            <el-form-item label="答案个数" v-if="question.type=='2'">
              <el-select v-model="question.answerNum" placeholder="答案个数">
                <el-option label="1个" value="1"></el-option>
                <el-option label="2个" value="2"></el-option>
                <el-option label="3个" value="3"></el-option>
                <el-option label="4个" value="4"></el-option>
              </el-select>
            </el-form-item>
            <!--            单选题和判断题的答案-->
            <el-form-item label="答案选项" v-if="question.type=='0'||question.type=='1'">
              <el-select v-model="question.answer" placeholder="答案选项">
                <el-option label="A" value="A"></el-option>
                <el-option label="B" value="B"></el-option>
                <el-option label="C" value="C" v-if="question.type=='0'"></el-option>
                <el-option label="D" value="D" v-if="question.type=='0'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>


        <el-form-item :label="question.type=='2'?'第一空':'选项A'"
                      v-if="(question.type=='0')||(question.type=='2'&&question.answerNum<=4)||(question.type=='1')">
          <el-input v-model="question.a"></el-input>
        </el-form-item>
        <el-form-item :label="question.type=='2'?'第二空':'选项B'"
                      v-if="(question.type=='0')||(question.type=='2'&&question.answerNum>=2&&question.answerNum<=4)||(question.type=='1')">
          <el-input v-model="question.b"></el-input>
        </el-form-item>
        <el-form-item :label="question.type=='2'?'第三空':'选项C'"
                      v-if="(question.type=='0')||(question.type=='2'&&question.answerNum>=3&&question.answerNum<=4)">
          <el-input v-model="question.c"></el-input>
        </el-form-item>
        <el-form-item :label="question.type=='2'?'第四空':'选项D'"
                      v-if="(question.type=='0')||(question.type=='2'&&question.answerNum==4)">
          <el-input v-model="question.d"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getExamedQuestions, delFromExam, addQuestion, updateQuestion} from "@/api/question";

export default {
  name: "ExamDetail",
  data() {
    return {
      single: [],
      judge: [],
      completion: [],
      totalScore: 0,
      singleScore: 0,
      judgeScore: 0,
      completionScore: 0,
      question: {
        type: '0',
        answerNum: '1',
        answer: 'A',
        examId: this.$store.state.examId,
        score: '1',
        a: '',
        b: '',
        c: '',
        d: '',
      },
      dialogFormVisible: false,
      isAdd: true,
      rules: {
        title: [{required: true, message: '请输入此项内容', trigger: 'blur'},]
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push({name: 'examList'})
    },
    getSingleTitleOrder() {
      if (this.judge.length > 0 && this.completion.length > 0) {
        return '三'
      } else if (this.judge.length > 0 && this.completion.length <= 0 || this.judge.length <= 0 && this.completion.length > 0) {
        return '二'
      } else if (this.judge.length <= 0 && this.completion.length <= 0) {
        return '一'
      }
    },
    handleEdit(question) {
      this.question = question
      this.dialogFormVisible = true
      this.isAdd = false
    },
    handleDel(id) {

      this.$confirm('确认删除该题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFromExam(id, this.examId).then(res => {
          this.initExam()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.isAdd = true
      this.question = {
        type: '0',
        answerNum: '1',
        answer: 'A',
        examId: this.$store.state.examId,
        score: '1',
        a: '',
        b: '',
        c: '',
        d: '',
      }
    },
    initExam() {
      getExamedQuestions(this.examId).then(res => {
        this.single = res.single
        this.judge = res.judge
        this.completion = res.completion
        this.totalScore = res.totalScore
        this.singleScore = res.singleScore
        this.judgeScore = res.judgeScore
        this.completionScore = res.completionScore
      })
    },
    handleTypeChange(val) {
      this.question.a = ''
      this.question.b = ''
      this.question.c = ''
      this.question.d = ''
      if (val == '0' || val == '1') {
        this.question.answerNum = '1'
        this.question.answer = 'A'
      } else if (val == '2') {
        this.question.answer = ''
      }
    },
    onSubmit() {
      this.$refs.qusForm.validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            //添加题目的操作
            addQuestion(this.question).then(res => {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.initExam()
            })
            this.dialogFormVisible = false

          } else {
            //修改题目
            updateQuestion(this.question).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.initExam()
            })
            this.dialogFormVisible = false
          }
        } else {
          this.$message.error('请填写或者修正内容！！！');
          return false;
        }
      });
    }
  },
  computed: {
    ...mapState(['examId', 'examName', 'user', 'isReadExam'])
  },
  mounted() {
    this.initExam()
  }
}
</script>

<style scoped lang="less">
.exam-detail-container {

  .exam-header {
    height: 40px;
    font-weight: 800;
    margin-bottom: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }

  .question-title {
    margin-bottom: 10px;
  }

  .question-content {
    margin-bottom: 10px;
  }
}
</style>
